<template>
  <div>
    <van-nav-bar
        title="百货"
        left-text="返回"
        left-arrow
        @click-left="back()"
    />
  </div>
  <div>
    <van-swipe :autoplay="2000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img @click="tz()" class="img1" :src="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
<!--  跑马灯-->
  <div id="33">
    <van-notice-bar
      left-icon="like" color="red"
      scrollable text="欢迎来到喜茶百货网上商城，想要啥，别客气"/>

    <div>
      <div id="left" style="background-color: saddlebrown;">


        <van-grid  :border="false" :column-num="1">

          <van-grid-item>
            <van-image
                :src="require('@/assets/img_3.png')"
                @click="tz()"
            />
          </van-grid-item>
        </van-grid>
      </div>
      <div id="right" style="background-color: white;">
        <div>
          <van-grid :column-num="1" gutter="5">
            <van-grid-item>
              <van-image
                  :src="require('@/assets/s.png')"
                  @click="tz()"

              />
              <van-image
                  :src="require('@/assets/x.png')"
                  @click="tz()"

              />
<!--              <img @click="tz()" class="img1" :src="image" />-->
            </van-grid-item>

          </van-grid>

        </div>
      </div>
    </div>
<!--    最后一行-->
    <div   >
">
      <h2>百货上新</h2><br>

        <div id="44">
          <van-grid :column-num="1" gutter="1">
            <van-grid-item>
              <van-image
                  :src="require('@/assets/img_4.png')"
                  @click="tz()"
              />

            </van-grid-item>

          </van-grid>

        </div>
    </div>

  </div>

<!-- 快捷导航-->

</template>

<script>
export default {
  name: "GroceryView",

  data() {
    return {
      images: [
        // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
        // 'ttps://fastly.jsdelivr.net/npm/@vant/ /assets/img_1.png,',
        // 'https://fastly.jsdelivr.net/npm/@vant//assets/img_2.png'
          require("@/assets/img_2.png"),
          require("@/assets/img_1.png")
      ],
    }
  },
  methods:{
    tz(){
      this.$router.push("order");
    },
    tz2(){
      this.$router.push("order");
    },
    back(){
      history.back();
    }
  }

}
</script>

<style >
.img1{
  width: 95%;
  height: 360px;
  float: top;
}
#left{
  text-align: center;
  float: left;
  width: 50%;
  height: 300px;
}
#right{
  float: right;
  width: 50%;
  height:300px;
}
#44{
  float: left;
  width: 50%;
}


</style>